<template>
	<view class="shop">
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">店铺详情</block>
		</cu-custom>		
		<view class="head" v-if="loaded">
			<view class="cover">
				<image :src="shop.banner ? url+shop.banner : '/static/shop_banner.jpg'"></image>
			</view>
			<view class="wrap">
				<view class="logo">
					<image :src="url + shop.logo"></image>
				</view>
				<view class="desc">
					<view class="name">{{ shop.shop_name }}</view>
					<view class="star">
						<image :src="shop.evaluationAvg >= x ? '/static/start_act.png' : '/static/start.png'" v-for="x in 5" :key="x"></image>
					</view>
					<view class="fans">粉丝数：{{ shop.collect_num }}</view>
				</view>				
			</view>
		</view>
		<view class="list">
			<view class="item" @tap="getLocation">
				<image src="/static/shop_addr.png"></image>
				<view>商家地址</view>
				<view>{{ shop.address }}</view>
			</view>		
			<view class="item" @tap="call">
				<image src="/static/shop_tel.png"></image>
				<view>服务电话</view>
				<view>{{ shop.username }}</view>
			</view>
			<view class="item tag distance">
				<image src="/static/shop_distance.png"></image>
				<view>商家距离</view>
				<view>{{ shop.distance }}m</view>
			</view>
			<view class="item tag time">
				<image src="/static/shop_time.png"></image>
				<view>营业时间</view>
				<view>{{ shop.work_starttime }} - {{ shop.work_endtime }}</view>
			</view>				
			<view class="item tag intr">
				<image src="/static/shop_info.png"></image>
				<view>商家简介</view>
				<view>{{ shop.introduction }}</view>
			</view>
			<navigator hover-class="none" :url="'/shop/list?id=' + id + '&act=1'" class="item">
				<image src="/static/shop_pro.png"></image>
				<view>全部商品</view>
			</navigator>
			<navigator hover-class="none" :url="'/shop/list?id=' + id + '&act=2'" class="item">
				<image src="/static/shop_hot.png"></image>
				<view>店铺热销</view>
			</navigator>
			<navigator hover-class="none" :url="'/shop/list?id=' + id + '&act=4'" class="item">
				<image src="/static/shop_news.png"></image>
				<view>新品上市</view>
			</navigator>			
		</view>
	</view>
</template>

<script>
	import { shopDetail } from '@/common/api/shop'
	import { mapGetters } from 'vuex'
	import { baseURL } from '@/common/utils/config'
	export default {
		name: 'shopDetail',
		data () {
			return {
				id: '',
				url: baseURL,
				shop: {},
				loaded: false
			}
		},
		onLoad (options) {
			this.id = options.id
			if (!this.id) {
				uni.showModal({
					content: '获取店铺信息失败',
					showCancel: false,
					success: res => {
						uni.navigateBack()
					}
				})
			} else {
				this.getInfo()
			}
		},
		computed: {
			...mapGetters([
				'location'
			])
		},
		methods: {
			getInfo () {
				uni.showLoading()
				shopDetail(Object.assign({}, this.location, { id: this.id })).then(res => {
					uni.hideLoading()
					this.loaded = true
					this.shop = res.recommend
				})
			},
			getLocation () {
				uni.openLocation({
					...this.location,
					scale: 18,
					name: this.shop.address,
					address: this.shop.address
				})
			},
			call () {
				uni.makePhoneCall({
					phoneNumber: this.shop.username
				})
			}
		}
	}
</script>

<style lang="less">
@import '../common/styles/variables.less'; 	
.shop {
	.head {
		padding: 40upx 20upx;
		position: relative;
		overflow: hidden;
		& > .cover {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 33;
			filter: blur(3px) sepia(10%);
			image {
				width: 100%;
				display: block;
				height: 100%;
			}
		}
		.wrap {
			display: flex;
			position: relative;
			z-index: 55;
			.logo {
				width: 200upx;
				height: 200upx;
				margin-right: 20upx;
				image {
					display: block;
					width: 100%;
					height: 100%;
				}
			}
			.desc {
				& > view {
					&.name {
						font-size: @medium;
					}
					margin-bottom: 10upx;
					font-size: @minSize;
					&.star {
						display: flex;
						padding-top: 6upx;
						image {
							width: 20upx;
							height: 20upx;
							display: block;
							&:not(:last-of-type) {
								margin-right: 6upx;
							}
						}
					}					
				}
			}
		}
	}
	.list {
		.item {
		    background-color: white;			
			&:not(.tag) {
				.border-bottom(60upx);
				.arrowRight(#666, 45upx, 15upx);
			}
			&.time, &.distance {
				.border-bottom(60upx);
				& > view {
					&:nth-of-type(2) {
						padding-right: 15upx;
					}
				}
			}
			&.intr {
				flex-direction: column;
				height: auto;
				image {
					top: 20upx;
				}
				& > view {
					width: 100%;			
					box-sizing: border-box;							
					&:nth-of-type(1) {
						height: @height;
						display: flex;
						align-items: center;
						.border-bottom(60upx);
					}
					&:nth-of-type(2) {
						padding: 15upx 15upx 15upx 65upx;
						
					}
				}
				margin-bottom: 20upx;
			}
			position: relative;
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: @height;
			& > image {
				position: absolute;
				left: 15upx;
				width: 40upx;
				height: 40upx;
			}
			& > view {
				&:nth-of-type(1) {
					padding-left: 65upx;
				}
				&:nth-of-type(2) {
					color: @gray;
				}
			}
		}
	}
}
</style>
